<template>
  <el-container>
    <el-header style="text-align: right; font-size: 12px">
      <el-dropdown>
        <i class="el-icon-setting" style="margin-right: 15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="logout">注销</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span>{{ username }}</span>
    </el-header>

    <!-- <el-main>
        <el-table :data="tableData">
          <el-table-column prop="date" label="日期" width="140">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
        </el-table>
      </el-main> -->
  </el-container>
</template>

<script>
import api from '@/api'
export default {
  data() {
    return {
      username: ''
    }
  },
  methods: {
    logout() {
      this.$confirm('您是否要注销登录, 是否继续?', '提示', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 清空vuex
          this.$store.commit('logout')
          // 跳转
          this.$router.push('/login')
          this.$message({
            type: 'success',
            message: '退出登录成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    }
  },
  created() {
    this.$http.get(api.getAdmin).then((res) => {
      if (res.errNo === 0 && res.message === 'success')
        this.username = res.accountInfo.username
    })
  }
}
</script>

<style lang="scss" scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
</style>
